<!--
 * Date: 2018年01月02日 09:32:33
 * LastEditors  : lvyou
 * LastEditTime : 2020年01月03日 13:58:51
 * FilePath: \youlinweb-master\src\components\commentdetail-header.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div style="position: relative;">
    <div class="commentdetailthumb" @click="commentdetailthumbup($event,commentindex)">
        <span class="yl-2zan commentdetailsvg" :style="{color:ywcolor}" :class="commentdetailisup">
        </span>
      <span class="thumbnum" :style="{color:ywcolor}">{{zannum}}</span>
    </div>
    <div class="commentdetail-header" @click="reply($event,commentindex)">
      <div class="pendant-container">
        <img class="commentdetailavatar" v-lazy="avaterImg" />
        <img :src="pendantPicUrl"  class="pendant" v-if="pendantType!=0&&pendantPicUrl">
        <img src="https://youlingqinius.wonderlandnet.cn/youlin-shengdan@2x.png"  class="pendant" v-else-if="pendantType==1">
        <img src="https://youlingqinius.wonderlandnet.cn/youlin-yuandan@2x.png"  class="pendant" v-else-if="pendantType==2">
        <img src="https://youlingqinius.wonderlandnet.cn/youlin-chunjie@2x.png"  class="pendant" v-else-if="pendantType==3">
        <img src="https://youlingqinius.wonderlandnet.cn/youlin-yuanxiao@2x.png"  class="pendant" v-else-if="pendantType==4">
        <img src="~img/vip.png"  class="vipimg v-h"  v-else-if="userType==2">
        <img src="~img/daren.png"  class="vipimg v-h" v-else-if="isTalent==1">
      </div>
      <div class="header-right">
        <div class="nameleft">
          <span class="name">{{name}}</span>
          <span class="commentdetaildata">{{time}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        ywcolor: this.commentdetailisup==0? '#999999':'#fb685b',
      }
    },
    props:['commentindex','commentdetailisup','avaterImg','name','time','zannum',"userType",'isTalent',"pendantType",'pendantPicUrl'],
    methods:{
      commentdetailthumbup(event,commentindex){
        this.$emit("comentdetailthumb",{event:event,commentindex:commentindex})
      },
      reply(event,commentindex){
        this.$emit("replycomment",{event:event,commentindex:commentindex})
      }
    },
    mounted(){
//      console.log(this.commentdetailisup)
    },
    watch: {
      commentdetailisup(val, oldval){
        if (val){
          this.ywcolor = '#fb685b'
          this.num += 1
        }else{
          this.ywcolor = '#999999'
          this.num -= 1
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .commentdetail-header{
    padding: 0.2rem 0.3rem 0.12rem 0.2rem;
    display: flex;
    align-items: center;
    background-color: white;
    .pendant{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .pendant-container{
      width: 0.9rem;
      position: relative;
      height: 0.9rem;
    }
  }
  .commentdetailavatar{
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .header-right{
    margin-left: 0.2rem;
    width: 6.2rem;
  }
  .nameleft{
    display: flex;
    flex-direction: column;
  }
  .commentdetaildata{
    font-size: 0.22rem;
    color: #999999;
  }
  .name{
    font-family: PingFangSC-Medium, sans-serif;
    font-size: 0.3rem;
    color: #3A3A3A;
  }
  .commentdetailthumb{
    display: flex;
    color: #999999;
    align-items: center;
    position: absolute;
    top: 0.2rem;
    right: 0rem;
    z-index: 0;
    padding: 0.2rem 0.3rem;

  }
  .commentdetailsvg{
    font-size: 0.32rem;
  }
  .thumbnum{
    font-size: 0.24rem;
    margin-left: 0.1rem;
  }
  .v-h{
    right: 0;
    bottom: 0;
  }
</style>
